<template>
  <el-dialog
    title="选择角色"
    :visible.sync="visibleDialog"
    width="600px"
    append-to-body
    class="promoter_person"
  >
    <div class="person_body clear">
      <div class="person_tree l">
        <input
          type="text"
          placeholder="搜索角色"
          v-model="searchVal"
          @input="getDebounceData($event, 2)"
        />
        <ul class="person-list" placeholder="人员列表为空">
          <li
            v-for="(item, index) in roles"
            :key="index + 'b'"
            class="check_box not"
            :class="
              $func.toggleClass(checkedRoleList, item, 'r_RoleID') && 'active'
            "
            @click="checkedRoleList = [item]"
          >
            <a :title="item.r_RoleName"
              ><img src="@/assets/images/icon_role.png" />{{
                item.r_RoleName
              }}</a
            >
          </li>
        </ul>
      </div>
      <div class="has_selected l">
        <p class="clear">
          已选（{{ total }}）
          <a @click="delList">清空</a>
        </p>
        <ul>
          <li v-for="(item, index) in checkedRoleList" :key="index + 'e'">
            <img src="@/assets/images/icon_role.png" />
            <span>{{ item.r_RoleName }}</span>
            <img
              src="@/assets/images/cancel.png"
              @click="$func.removeEle(checkedRoleList, item, 'r_RoleID')"
            />
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { GetRoleList } from "@/api/apis/flowPath";
import mixins from "./mixins";
export default {
  mixins: [mixins],
  props: ["visible", "data"],
  watch: {
    visible(val) {
      this.visibleDialog = this.visible;
      if (val) {
        // this.getRoleList();
        this.getRoleListByRoleManage();
        this.searchVal = "";
        this.checkedRoleList = this.data.map(({ name, targetId }) => ({
          r_RoleName: name,
          r_RoleID: targetId,
        }));
      }
    },
    visibleDialog(val) {
      this.$emit("update:visible", val);
    },
  },
  computed: {
    total() {
      return this.checkedRoleList.length;
    },
  },
  data() {
    return {
      checkedRoleList: [],
    };
  },
  methods: {
    saveDialog() {
      let checkedList = this.checkedRoleList.map((item) => ({
        type: 2,
        targetId: item.r_RoleID,
        name: item.r_RoleName,
      }));
      this.$emit("change", checkedList);
    },
    delList() {
      this.checkedRoleList = [];
    },
    //* 从接口获取角色列表
    async getRoleListByRoleManage() {
      const res = await GetRoleList({
        Sequence: "",
        SequenceName: "",
        limit: 10,
        page: 1,
      });
      this.roles = res.data[1]
      // this.$axios.post(`/RoleManage/GetList?page=1&limit=1000000`, {}).then(res => {
      //   this.roles = res.data;
      // }).catch((error) => {
      //   this.$message.error('请求角色接口出错，请联系管理员。', error);
      // });
    },
  },
};
</script>

<style src="../../css/dialog.css" src="../../css/override-element-ui.css" src="../../css/dialog.css"  scoped>

.person-list:empty::before {
  content: attr(placeholder);
  color: #ccc;
  font-size: 18px;
}
</style>
